<template>
  <WithDialog
    :visible.sync="dialogVisible"
    title="创建类型"
    :confirm-btn-loading="loading"
    @confirm="handleConfirm"
    @cancel="handleCancel"
  >
    <el-form
      ref="formRef"
      :model="model"
      label-position="left"
      :rules="rules"
    >
      <el-form-item label="名称" :label-width="labelWidth" prop="name">
        <el-input
          v-model="model.name"
          placeholder="请输入名称"
          maxlength="20"
          show-word-limit
          clearable
        />
      </el-form-item>
      <el-form-item label="备注" :label-width="labelWidth" prop="remark">
        <el-input
          v-model="model.remark"
          placeholder="请输入备注"
          maxlength="200"
          type="textarea"
          show-word-limit
          clearable
        />
      </el-form-item>
    </el-form>
  </WithDialog>
</template>
<script>
import WithDialog from '@/components/WithDialog/withDialog.vue'
export default {
  name: '',
  components: {
    WithDialog
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },

    loading: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      model: {
        name: '',
        remark: null
      },
      rules: {
        name: [{ required: true, message: '请输入类型名称', trigger: ['change', 'blur'] }]
      },
      labelWidth: '100px'
    }
  },
  computed: {
    dialogVisible: {
      get() {
        return this.visible
      },
      set(value) {
        this.$emit('update:visible', value)
      }
    }
  },
  methods: {
    async handleConfirm() {
      const res = await this.$refs.formRef.validate()
      if (!res) return this.$message.error('请提交正确的信息')
      this.$emit('confirm', this.model)
    },

    handleCancel() {
      this.close()
    },

    close() {
      this.$emit('update:visible', false)
    },

    resetFields() {
      this.$refs.formRef.resetFields()
    }
  }
}
</script>
<style lang="scss" scoped>
::v-deep(.el-dialog__body) {
  padding-top: 0;
}
</style>
